<!--
 * @Description: 
 * @Author: charles
 * @Date: 2020-11-03 12:36:26
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-10-07 10:23:41
-->
<template>
  <div>
    <div class="header">
      <div id="logo">
        美食天下张
      </div>
      <div id="left">
        <ul>
          <li>首页</li>
          <li>菜谱</li>
          <li>食谱</li>
          <li>健康</li>
          <li>专题</li>
          <li>活动</li>
          <li>社区</li>
          <li>话题</li>
          <li>搜索</li>
          <li id="triangle">
            <div></div>
            <!-- <ul>
              <li>烘焙</li>
              <li>婴幼</li>
            </ul> -->
          </li>
        </ul>
      </div>
      <div id="right">
        <ul>
          <li>注册</li>
          <li>登录</li>
        </ul>
      </div>
    </div>
    <div class="nav">
      
    </div>
    <div class="content">
      <!-- 轮播图 -->
      <el-carousel>
        <el-carousel-item v-for="item in carousel" :key="item.id">
          <img :src="item.url" width="100%" height="100%" alt="图片丢失">
        </el-carousel-item>
      </el-carousel>

      <!-- 游学项目卡片 -->
      <div class="project">
        <!-- <h1>精选游学项目</h1> -->
        <div class="proCard" v-for="item in projects" :key="item.id" v-on:click='cardHandler(item.id)'>
          <div class="photo">
            <img :src="item.figure" alt="图片丢失" width="300px" height="200px">
          </div>
          <div class="introduce">
            <div class="pro_name">{{item.name}}</div>
            <!-- <div class="pro_date">{{item.beginTime}} ~ {{item.endTime}} </div> -->
            <div class="pro_date">{{fmtDate(item.beginTime)}} ~ {{fmtDate(item.endTime)}} </div>
            <div class="pro_introduce">{{item.introduce}}</div>
          </div>
        </div>
      </div>

      <!-- 问题区域 -->

    </div>
  </div>
</template>
<script>
// ************轮播图部分*****
import {get} from '../utils/request'
// ************游学项目卡片部分*****
import request from '../utils/request'   //导入request  连接接口
//导入moment组件
import moment from 'moment'
export default {
  data(){
    return {
      carousel:[],  //轮播图
      projects:[]  //游学卡片 从后台获取project数据  自定义名字
    }
  },
  methods:{
      findAllCarousel(){    //轮播图接口
        get('/index/carousel/findAll').then(res=>{
          // if(res&&res.status==200&&res.data){
            this.carousel=res.data;
          // }
        })
      },
      findAllProjects(){  //游学卡片接口    找到后台接口  自定义方法
      request.get('/index/project/pageQuery?page=1&pageSize=3').then(res=>{ //get()是请求get接口  请求路径  字符串拼接?传递参数  
        if(res&&res.status==200&&res.data){  //判断请求存在  
        this.projects=res.data.list;  //将后台请求回来的游学项目列表赋值给projects  回调函数
        }else{
          this.projects=[];
        }
      });  
      },
      fmtDate(date){  //时间转换函数
      return this.$moment(date).format('YYYY-MM-DD HH:mm:ss');   //date时间戳传递过来  moment返回去
      },
      cardHandler:function(id){   //实现页面跳转
        //点击当前卡片实现路由跳转，跳转至项目的详情页
        this.$router.push({  //路由跳转的同时实现传参  参数在跳转目标页中实现参数的获取
            path:'/project',
            query:{
              id
            }
          });
      },
  },
    created(){   //vue生命周期的函数   压面加载完毕之后执行，此时data的methods已经初始化完成
      this.findAllCarousel();   //调用查询轮播图的方法
      this.findAllProjects();  //调用查询游学项目的方法
    }
}
</script>
<style scoped>
/* 头部导航栏 */
.header{
  background-color: #333333;
  height: 45px;
  line-height: 45px;
  box-sizing: border-box;
  color: #bebebe;
}
.header>div{
  display: inline-block;
}
.header #logo{
  width: 100px;
  padding-left: 17px;
  color: pink;
  font-size: 18px;
  font-family: "KaiTi";
}
.header #left{
  margin-left: 50px;
}
.header #left ul li{
  list-style: none;
  display: inline-block;
  width: 60px;
  text-align: center;
}
.header #left ul li:last-child div{
  width: 0px;
  height: 0px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid #bebebe;
}
 /* 二级菜单 */
/* .header #left ul #triangle{     
  position: relative;
}
.header #left ul #triangle ul{
  position: absolute;
  top: 22px;
  left: -35px;
  background-color: black;
  color: white;
}
.header #left ul #triangle ul li{
  margin: 0px;
} */
.header #right{
  float: right;
  margin-right: 150px;
}
.header #right ul li{
  list-style: none;
  display: inline-block;
  width: 60px;
  text-align: center;
}
/* 轮播图 */
.project{
  padding:50px 200px;
}
.proCard{
  display: flex;
  margin-bottom: 50px;
  box-shadow: 0 0 5px 1px #999;
}
.photo{
  border-radius: 2px;
}
.photo img{
  vertical-align: top;
}
.introduce{
  padding-left: 50px;
}
.pro_name{
  font-size: 18px;
  font-weight: bold;
  height: 50px;
  line-height: 50px;
}
.pro_date{
  height: 30px;
  line-height: 30px;
}
.pro_introduce{
  height: 100px;
  line-height: 25px;
}

</style>